<template>
	<view class="container">
		<view class="bann">
			<image class="ban_img" :src="row.yqbgimg"></image>
			<view class="ban_box">
				<view class="ban_title">
					<image src="/static/images/yqtit.png"></image>
				</view>
				<view class="ban_info">
					<view class="bjtit">邀请好友完成任务即可得</view>
					<view class="bjnum"><text>{{row.yqfen}}</text>积分</view>
				</view>
			</view>
			<image class="ban_bot" src="/static/images/lccbg.png"></image>
			<image class="ban_btn" src="/static/images/yqbtn.png" @click="yqbtn"></image>
		</view>
		<view class="icont">
			<view class="lc_title">
				<image src="/static/images/lctit.png"></image><text>邀请流程</text>
			</view>
			<view class="lc_txt">简单三步获得积分，多邀多得</view>
			<view class="lc_box">
				<view class="lc_dl">
					<image class="lcline" src="/static/images/lcline.png"></image>
					<view class="lc_dt">
						<image src="/static/images/lcico1.png"></image>
					</view>
					<view class="lc_dd">分享海报或链接</view>
				</view>
				<view class="lc_dl">
					<image class="lcline" src="/static/images/lcline.png"></image>
					<view class="lc_dt">
						<image src="/static/images/lcico2.png"></image>
					</view>
					<view class="lc_dd">好友扫码注册成功</view>
				</view>
				<view class="lc_dl">
					<view class="lc_dt">
						<image src="/static/images/lcico3.png"></image>
					</view>
					<view class="lc_dd">即可获得积分</view>
				</view>
			</view>
		</view>
		<view class="icont">
			<view class="ict_title"><text>邀请规则</text></view>
			<view class="ict_box">
				<text>
					<block v-for="(item,index) in row.yqguize" :key="index">
						• {{index}}：{{item}}\n
					</block>
				</text>
			</view>
		</view>
		<navigator hover-class="none" url="/pages/user/inviterecord/inviterecord">
			<view class="jlbtn">
				<view class="jlbtn_txt">邀请记录</view>
				<view class="jlbtn_ico"><text></text></view>
			</view>
		</navigator>
		<uni-popup ref="popup" @change="change">
			<view class="popup-content">
				<view class="pop_block">
					<image :src="path" mode="widthFix"></image>
					<l-painter :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
				</view>
				<view class="pop_btn" @click="download"><text class="iconfont icon-xiazai"></text>
					//#ifdef MP-WEIXIN
					保存图片
					//#endif
					//#ifdef WEB
					长按图片保存
					//#endif
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				row: [],
				user: [],
				path: '',
				poster: {
					src: "",
					type: "image",
					css: {
						objectFit: "cover",
						objectPosition: "50% 50%",
						background: "#d9e6fc",
						width: "750rpx"
					},
					views: [{
						css: {
							marginLeft: "40rpx",
							marginTop: "800rpx",
							marginBottom: "40rpx",
							padding: "50rpx",
							boxSizing: "border-box",
							background: "#fff",
							borderRadius: "20rpx",
							width: "670rpx",
						},
						views: [{
								text: "",
								type: "text",
								css: {
									display: "block",
									paddingBottom: "10rpx",
									color: "#222",
									fontSize: "44rpx",
									textAlign: 'center',
									fontWeight: "bold"
								}
							},
							{
								text: "",
								type: "text",
								css: {
									display: "block",
									color: "#666",
									textAlign: 'center',
									fontSize: "28rpx"
								},
							},
							{
								css: {
									borderTop: "2rpx dashed #d9e6fc",
									marginTop: "40rpx",
									paddingTop: "40rpx",
								},
								views: [{
										//#ifdef WEB
										text: "",
										type: "qrcode",
										//#endif
										//#ifdef MP-WEIXIN
										src: "",
										type: "image",
										//#endif
										css: {
											width: "180rpx",
											height: "180rpx",
											marginLeft: "30rpx",
										},
									},
									{
										type: "view",
										css: {
											width: "300rpx",
											marginTop: "20rpx",
											paddingLeft: "50rpx",
											display: "inline-block"
										},
										views: [{
											text: "长按识别二维码",
											type: "text",
											css: {
												display: "block",
												marginTop: "20rpx",
												color: "#666",
												fontSize: "32rpx"
											},
										}, {
											text: "查看更多",
											type: "text",
											css: {
												display: "block",
												marginTop: "20rpx",
												color: "#666",
												fontSize: "32rpx"
											},
										}],
									}
								],
								type: "view"
							}
						],
						type: "view"
					}]
				}
			}
		},
		onLoad() {
			var $this = this
			var $this = this
			//#ifdef MP-WEIXIN
			var isminapp = 1;
			//#endif
			//#ifdef WEB
			var isminapp = 0
			//#endif
			API.post("common/invite", {
				isminapp: isminapp
			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
					//海报
					$this.poster.src = $this.row.yqimg
					$this.poster.views[0].views[0].text = $this.row.yqtitle
					$this.poster.views[0].views[1].text = "来自：" + res.data.nickname + "的分享"

					if (isminapp == 1) {
						$this.poster.views[0].views[2].views[0].src = res.data.ewm
					} else {
						$this.poster.views[0].views[2].views[0].text = res.data.ewm
					}

				}
			})
			API.post("user/getUser").then((res) => {
				if (res.code == 1) {
					$this.user = res.data
				}
			})
		},
		//#ifdef MP-WEIXIN
		onShareAppMessage: function(res) {
			return {
				title: this.row.yqtitle,
				path: '/pages/index/index?parentid=' + this.user.id,
				imageUrl: this.row.yqbgimg
			}
		},
		onShareTimeline: function() {
			return {
				title: this.row.yqtitle,
				query: '/pages/index/index?parentid=' + this.user.id,
				imageUrl: this.row.yqbgimg
			}
		},
		//#endif
		methods: {
			download() {
				//#ifdef MP-WEIXIN
				var byte = this.path.replace("data:image/png;base64,", "");
				const fs = uni.getFileSystemManager();
				var number = Math.random();
				var $this = this
				fs.writeFile({
					filePath: uni.env.USER_DATA_PATH + '/code' + number + '.png',
					data: byte,
					encoding: "base64",
					success(res) {

						uni.saveImageToPhotosAlbum({
							filePath: uni.env.USER_DATA_PATH + '/code' + number + '.png',
							success: function(res) {
								$this.close()
								uni.showToast({
									title: "下载成功",
									icon: "success"
								});
							},
							fail: function(err) {
								console.log(err)
							}
						})
					}
				})
				//#endif
			},
			yqbtn() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #d9e6fc;
	}

	.container {
		padding-bottom: 30rpx;
	}

	.bann {
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.ban_img {
		width: 100%;
		height: 1030rpx;
	}

	.ban_box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.ban_title image {
		width: 100%;
		height: 406rpx;
	}

	.ban_bot {
		position: absolute;
		left: 0;
		bottom: -2rpx;
		right: 0;
		width: 100%;
		height: 110rpx;
		z-index: 1;
	}

	.bjtit {
		text-align: center;
		color: #f15764;
		line-height: 66rpx;
	}

	.bjnum {
		font-size: 40rpx;
		text-align: center;
		color: #f15764;
		margin-top: 20rpx;
	}

	.bjnum text {
		font-weight: bold;
		font-size: 70rpx;
		padding-right: 10rpx;
	}

	.ban_btn {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 3;
		width: 532rpx;
		height: 136rpx;
	}

	.icont {
		margin: 30rpx 30rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.lc_title {
		position: absolute;
		top: -14rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.lc_title image {
		width: 258rpx;
		height: 64rpx;
	}

	.lc_title text {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		line-height: 64rpx;
	}

	.lc_txt {
		margin-top: 40rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.lc_box {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.lc_dl {
		text-align: center;
		position: relative;
		flex: 1;
	}

	.lc_dt image {
		width: 92rpx;
		height: 92rpx;
		border-radius: 92rpx;
	}

	.lc_dd {
		color: #666666;
		margin-top: 10rpx;
		display: block;
		overflow: hidden;
	}

	.lcline {
		position: absolute;
		top: 40rpx;
		right: -40rpx;
		width: 80rpx;
		height: 14rpx;
	}

	.ict_title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ict_title text {
		display: inline-block;
		position: relative;
		z-index: 1;
		padding: 0 4rpx;
	}

	.ict_title text::after {
		content: '';
		width: 100%;
		height: 10rpx;
		border-radius: 10rpx;
		background: #8fe2fe;
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: -1;
	}

	.ict_box {
		padding: 30rpx;
		font-size: 26rpx;
		line-height: 50rpx;
		color: #555;
	}

	.jlbtn {
		background: rgba(0, 0, 0, 0.4);
		border-radius: 20rpx 0 0 20rpx;
		color: #fff;
		position: fixed;
		top: 20%;
		right: 0;
		width: 40rpx;
		text-align: center;
		padding: 20rpx 10rpx 20rpx 14rpx;
		z-index: 5;
	}

	.jlbtn_txt {
		font-size: 30rpx;
		letter-spacing: 2rpx;
		writing-mode: vertical-rl;
	}

	.jlbtn_ico {
		width: 28rpx;
		height: 28rpx;
		border-radius: 28rpx;
		background: #fff;
		margin: 10rpx auto 0;
	}

	.jlbtn_ico text {
		float: left;
		margin: 4rpx 0 0 12rpx;
		position: relative;
		width: 0;
		height: 0;
		border: 10rpx solid;
		border-color: transparent transparent transparent #3d90fb;
	}

	.jlbtn_ico text::after {
		content: '';
		position: absolute;
		top: -10rpx;
		left: -14rpx;
		border: 10rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.popup-content {
		width: 80vw;
		text-align: center;
	}

	.pop_block {
		width: 100%;
		overflow: hidden;
	}

	.pop_block image {
		width: 100%;
	}

	.pop_btn {
		display: inline-block;
		padding: 0 60rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: $color;
		color: #fff;
		font-size: 36rpx;
		margin: 30rpx auto 0;
	}

	.pop_btn text {
		padding-right: 10rpx;
	}
</style>